<template>
	<view>
		<view class="form-view">
			<view class="form-item-row">
				<view class="label required-label">服务地址</view>
				<view class="form-item">
					<view @click="setServiceAddress">
						<view class="input-view placeholder-class" v-if="!form.serviceAddress">请选择</view>
						<view class="input-view" v-else>{{ form.serviceAddress }}</view>
					</view>
					<image src="../../static/item_go.png" class="item-go-icon"></image>
				</view>
			</view>

			<view class="div-line" />

			<view class="form-item-row">
				<view class="label required-label">详细地址</view>
				<view style="display: flex; flex-direction: column">
					<view style="display: flex">
						<input v-model="form.community" placeholder-class="placeholder-class" placeholder="输入小区名称" style="
                width: 300rpx;
                border-bottom: solid 1rpx;
                text-align: center;
              " />小区
						<input v-model="form.building" placeholder-class="placeholder-class" placeholder="例:10" style="
                width: 80rpx;
                border-bottom: solid 1rpx;
                text-align: center;
              " />栋
					</view>
					<view style="display: flex">
						<input v-model="form.buildingUnit" placeholder-class="placeholder-class" placeholder="例:4" style="
                width: 80rpx;
                border-bottom: solid 1rpx;
                text-align: center;
              " />单元
						<input v-model="form.roomNum" placeholder-class="placeholder-class" placeholder="例:202" style="
                width: 120rpx;
                border-bottom: solid 1rpx;
                text-align: center;
              " />室
					</view>
				</view>
			</view>

			<view class="div-line" />

			<view class="form-item-row">
				<view class="label required-label">联系人</view>
				<view class="form-item">
					<view class="input-view">
						<input v-model="form.contactPerson" placeholder-class="placeholder-class" placeholder="您的姓名" />
					</view>
				</view>
			</view>

			<view class="div-line" />

			<view class="form-item-row">
				<view class="label required-label">手机号码</view>
				<view class="form-item">
					<view class="input-view">
						<input type="number" maxlength="11" v-model="form.contactPhone" placeholder-class="placeholder-class"
							placeholder="医护人员联系您的手机号码" />
					</view>
				</view>
			</view>

			<view class="div-line" />

			<view class="form-item-row">
				<view class="label">就诊人是您</view>
				<view class="form-item">
					<picker mode="selector" :range="clientList" @change="onClientChange">
						<view class="form-item">
							<view class="input-view">{{ form.client }}</view>
							<image src="../../static/item_go.png" class="item-go-icon"></image>
						</view>
					</picker>
				</view>
			</view>

			<view class="div-line" />

			<view class="form-item-row">
				<view class="label">是否有过敏史</view>
				<view class="form-item">
					<view class="input-view">
						<view class="switch-view">
							<view @click="onHistoryAllergiesClick(item)" :class="
                  form.isHistoryAllergies === item ? 'switch-item-selected' : ''
                " class="switch-item" v-for="item in switchList">
								{{ item }}
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="div-line" />

			<view class="form-item-row">
				<view class="label">是否有常见病或慢性病</view>
				<view class="form-item">
					<view class="input-view">
						<view class="switch-view">
							<view @click="onChronicDisease(item)" :class="
                  form.isChronicDisease === item ? 'switch-item-selected' : ''
                " class="switch-item" v-for="item in switchList">
								{{ item }}
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="div-line" />

			<view class="upload-id-card-view">
				<view class="title">上传身份证</view>
				<view class="card-view">
					<view class="card-item">
						<image v-if="!form.idCardFront" src="../../static/item_idcard_front.png" class="card-img"
							@click="onIdCardFrontClick">
						</image>
						<image v-else :src="form.idCardFront" class="card-img" @click="onIdCardFrontClick">
						</image>
						<view class="tip-text">身份证正面</view>
					</view>
					<view class="card-item">
						<image v-if="!form.idCardReverse" src="../../static/item_idcard_back.png" class="card-img"
							@click="onIdCardReverseClick">
						</image>
						<image v-else :src="form.idCardReverse" class="card-img" @click="onIdCardReverseClick">
						</image>
						<view class="tip-text">身份证反面</view>
					</view>
				</view>
			</view>

			<view class="form-item-row">
				<view class="label required-label">姓名</view>
				<view class="form-item">
					<view class="input-view">
						<input v-model="form.patientName" placeholder-class="placeholder-class" placeholder="上传证件后自动获取" />
					</view>
				</view>
			</view>

			<view class="div-line" />

			<view class="form-item-row">
				<view class="label required-label">性别</view>
				<view class="form-item">
					<view class="input-view">
						<picker mode="selector" :range="['男', '女']" @change="onSexChange">
							<input v-model="form.sex" placeholder-class="placeholder-class" placeholder="上传证件后自动获取" />
						</picker>
					</view>
				</view>
			</view>

			<view class="div-line" />

			<view class="form-item-row">
				<view class="label required-label">身份证号</view>
				<view class="form-item">
					<view class="input-view">
						<input v-model="form.idNum" placeholder-class="placeholder-class" placeholder="上传证件后自动获取" />
					</view>
				</view>
			</view>

			<view class="div-line" />

			<view class="form-item-row">
				<view class="label required-label">出生日期</view>
				<view class="form-item">
					<view class="input-view">
						<picker mode="date" @change="onBirthDateChange">
							<input v-model="form.birthDate" placeholder-class="placeholder-class" placeholder="上传证件后自动获取" />
						</picker>
					</view>
				</view>
			</view>

			<view class="big-div-line" />

			<view class="form-item-row">
				<view class="label" style="font-weight: bold">患者评估信息</view>
				<view class="form-item">
					<view class="input-view placeholder-class"> </view>
				</view>
			</view>

			<view class="form-item-row">
				<view class="small-label required-label">1.是否有自理能力？</view>
				<view class="form-item">
					<view class="input-view">
						<picker mode="selector" :range="['是', '否']" @change="onSelfCareAbilityChange">
							<view class="placeholder-class" v-if="!form.selfCareAbility">请选择</view>
							<view class="selector-text" v-else>{{
                form.selfCareAbility
              }}</view>
						</picker>
					</view>
				</view>
			</view>

			<view class="div-line" />

			<view class="form-item-row">
				<view class="small-label required-label">2.近期就诊于哪家医院？(请填写医院名称和疾病名称)</view>
				<view class="form-item">
					<view class="input-view placeholder-class"> </view>
				</view>
			</view>

			<view class="div-line" />

			<view class="form-item-row">
				<view class="text-form-item">
					<view class="big-input-view">
						<textarea v-model="form.recentVisitsHospital" placeholder-class="placeholder-class" placeholder="请填写" />
					</view>
				</view>
			</view>

			<view class="div-line" />

			<view class="form-item-row">
				<view class="small-label required-label">3.你的意识状态如何？</view>
				<view class="form-item">
					<view class="input-view">
						<picker mode="selector" :range="['清醒', '模糊', '昏迷']" @change="onConsciousnessStateChange">
							<view class="placeholder-class" v-if="!form.consciousnessState">请选择</view>
							<view class="selector-text" v-else>{{
                form.consciousnessState
              }}</view>
						</picker>
					</view>
				</view>
			</view>
		</view>

		<view class="bottom-view">
			<view class="agreement-view">
				<view class="text">保存代表您已同意</view>
				<view class="item">《知情同意书》</view>
				<view class="text">和</view>
				<view class="item">《保险须知》</view>
			</view>
			<view class="save-btn" @click="handleSave">保存</view>
		</view>
	</view>
</template>

<script>
	import * as patientContact from '../../common/api/patientContact.js'
	import * as upload from '../../common/upload.js'
	import * as userInfo from '../../common/api/userInfo.js'
	export default {
		data() {
			return {
				switchList: ['否', '是'],
				clientList: ['本人', '子女', '父母', '配偶', '其他'],
				form: {
					wxOpenid: '',
					nickname: '',
					headPortrait: '',
					sex: '',
					serviceAddress: '',
					community: '',
					building: '',
					buildingUnit: '',
					roomNum: '',
					detailedAddress: '',
					contactPerson: '',
					contactPhone: '',
					client: '本人',
					isHistoryAllergies: '否',
					isChronicDisease: '否',
					idCardFront: '',
					idCardReverse: '',
					patientName: '',
					idNum: '',
					birthDate: '',
					isHistoryAllergiesSel: '', // 是否有过敏史
					isChronicDiseaseSel: '', // 是否有常见病或慢性病
					historyAllergiesMemo: '', // 是否有过敏史
					chronicDiseaseMemo: '', // 有常见病或慢性病描述
					recentVisitsHospital: '', // 近期就诊医院
					consciousnessState: '', // 意识状态
					selfCareAbility: '', //自理能力
					longitude: '', //经度
					latitude: '', //纬度
				},
				status: 'add',
				uid: ''
			}
		},
		onLoad(opt) {
			if (opt.uid) {
				this.status = 'edit'
				this.uid = opt.uid
			} else {
				this.status = 'add'
			}
		},
		onShow() {
			if (this.status === 'add') {
				this.init()
			} else if (this.status === 'edit') {
				this.initEdit()
			}
		},
		methods: {
			initEdit() {
				uni.setNavigationBarTitle({
					title: '编辑就诊人'
				})
				const param = {
					uid: this.uid
				}
				patientContact.queryById(param).then(result => {
					this.form = result.data.data
				}).catch(error => {
					console.log(error);
				})
			},
			init() {
				uni.setNavigationBarTitle({
					title: '新增就诊人'
				})
				this.form.wxOpenid = uni.getStorageSync('openid_key')
				const param = {
					openId: this.form.wxOpenid
				}
				userInfo.queryByOpenId(param).then(result => {
					console.log('init', result);
					this.form.nickname = result.data.data.nickname
					this.form.headPortrait = result.data.data.headPortrait
				}).catch(error => {
					console.log(error);
				})
			},
			setServiceAddress() {
				console.log('111');

				uni.chooseLocation({
					success: (res) => {
						console.log('setServiceAddress', res);
						this.form.serviceAddress = res.address
						this.form.latitude = res.latitude
						this.form.longitude = res.longitude
						console.log('this.form', this.form);
					}
				})
			},
			onHistoryAllergiesClick(e) {
				this.form.isHistoryAllergies = e
			},
			onChronicDisease(e) {
				this.form.isChronicDisease = e
			},
			onIdCardFrontClick() {
				const self = this
				uni.chooseImage({
					success(res) {
						upload.uploadIdCardFile(res.tempFilePaths[0])
							.then(result => {
								uni.showToast({
									icon: 'success',
									title: '上传成功'
								})
								self.form.idCardFront = result.data.url
								self.form.idNum = result.data.idInfo.num
								self.form.patientSex = result.data.idInfo.sex
								self.form.birthDate = result.data.idInfo.birth
								self.form.patientName = result.data.idInfo.name
								console.log('res');
							}).catch(error => {
								uni.showToast({
									icon: 'none',
									title: `上传失败${JSON.stringify(error)}`
								})
							})
					}
				})
			},
			onIdCardReverseClick() {
				const self = this
				upload.uploadImage().then(result => {
					uni.showToast({
						icon: 'success',
						title: '上传成功'
					})
					console.log('===>', result);
					self.form.idCardReverse = result.data.url
				})
			},
			onBirthDateChange(e) {
				this.form.birthDate = e.detail.value
			},
			onSexChange(e) {
				this.form.sex = ['男', '女'][e.detail.value]
			},
			onClientChange(e) {
				this.form.client = this.clientList[e.detail.value]
			},
			checkForm() {
				let msg = ''
				const showMsg = () => {
					if (msg) {
						uni.showToast({
							title: msg,
							icon: 'none'
						})
					}
				}
				if (!this.form.serviceAddress) {
					msg = '服务地址不能为空'
					showMsg()
					return false
				}

				if (!this.form.contactPerson) {
					msg = '联系人不能为空'
					showMsg()
					return false
				}
				if (!this.form.contactPhone) {
					msg = '手机号码不能为空'
					showMsg()
					return false
				}
				if (!this.form.idCardFront) {
					msg = '请上传身份证正面'
					showMsg()
					return false
				}
				if (!this.form.idCardReverse) {
					msg = '请上传身份证反面'
					showMsg()
					return false
				}
				if (!this.form.patientName) {
					msg = '姓名不能为空'
					showMsg()
					return false
				}
				if (!this.form.sex) {
					msg = '性别不能为空'
					showMsg()
					return false
				}
				if (!this.form.idNum) {
					msg = '身份证号不能为空'
					showMsg()
					return false
				}
				if (!this.form.birthDate) {
					msg = '出生日期不能为空'
					showMsg()
					return false
				}
				if (!this.form.isHistoryAllergies) {
					msg = '是否有过敏史不能为空'
					showMsg()
					return false
				}
				// if (this.form.isHistoryAllergiesSel === '有') {
				// 	if (!this.form.historyAllergiesMemo) {
				// 		msg = '过敏原不能为空'
				// 		showMsg()
				// 		return false
				// 	}
				// }
				if (!this.form.isChronicDisease) {
					msg = '是否有慢性病不能为空'
					showMsg()
					return false
				}
				// if (this.form.isChronicDiseaseSel === '有') {
				//   if (!this.form.chronicDiseaseMemo) {
				//     msg = '慢性病史不能为空'
				//     showMsg()
				//     return false
				//   }
				// }
				if (!this.form.selfCareAbility) {
					msg = '是否有自理能力不能为空'
					showMsg()
					return false
				}
				if (!this.form.recentVisitsHospital) {
					msg = '近期就诊医院不能为空'
					showMsg()
					return false
				}
				if (!this.form.consciousnessState) {
					msg = '意识状态不能为空'
					showMsg()
					return false
				}
				return true
			},
			handleAdd() {
				if (!this.checkForm()) {
					return
				}
				const param = Object.assign({}, this.form)
				console.log(param);
				patientContact.insert(param).then(result => {
					console.log(result);
					uni.showToast({
						title: result.data.msg,
					})
					this.$store.commit("page/setPageInfo", {
						isAddPatientInfo: true
					})
					this.$nextTick(() => {
						uni.navigateBack()
					})
				}).catch(error => {
					console.log(error);
				})
			},
			handleUpdate() {
				if (!this.checkForm()) {
					return
				}
				const param = Object.assign({}, this.form, {
					createTime: undefined,
					updateTime: undefined
				})
				console.log(param);
				patientContact.update(param).then(result => {
					console.log(result);
					uni.showToast({
						title: result.data.msg,
					})
					this.$store.commit("page/setPageInfo", {
						isUpdatePatientInfo: true
					})
					this.$nextTick(() => {
						uni.navigateBack()
					})
				}).catch(error => {
					console.log(error);
				})
			},
			handleSave() {
				if (this.status === 'add') {
					this.handleAdd()
				} else if (this.status === 'edit') {
					this.handleUpdate()
				}
			},
			onIsHistoryAllergiesChange(e) {
				this.form.isHistoryAllergiesSel = ['有', '无'][e.detail.value]
			},
			onIsChronicDiseaseChange(e) {
				this.form.isChronicDiseaseSel = ['有', '无'][e.detail.value]
			},
			onConsciousnessStateChange(e) {
				this.form.consciousnessState = ['清醒', '模糊', '昏迷'][e.detail.value]
			},
			onSelfCareAbilityChange(e) {
				this.form.selfCareAbility = ['是', '否'][e.detail.value]
			},
			showDetail(item) {
				if (!item) {
					return false
				}
				if (item === '无') {
					return false
				}
				return true
			},
			onDetailedAddressChange(e) {
				console.log(e);
				this.form.detailedAddress = e.detail.value.map(e => e.value).join('')
			}

		}
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.form-view {
		width: 100%;
		background: white;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		.div-line {
			width: 100%;
			height: 2rpx;
			background: #f8f8f8;
		}

		.big-div-line {
			width: 100%;
			height: 30rpx;
			background: #f8f8f8;
		}

		.item-go-icon {
			width: 24rpx;
			height: 24rpx;
			margin-left: 16rpx;
		}

		.placeholder-class {
			color: rgba(35, 35, 35, 0.4);
			font-size: 32rpx;
		}

		.form-item {
			display: flex;
			align-items: center;

			.input-view {}
		}

		.text-form-item {
			display: flex;
			align-items: center;
			width: 100%;
			margin-top: 20rpx;

			.big-input-view {
				width: 100%;

				textarea {
					width: 100%;
					text-align: start;
				}
			}
		}

		.switch-view {
			display: flex;
			align-items: center;

			.switch-item {
				width: 96rpx;
				height: 60rpx;
				border-radius: 10rpx;
				background: #f8f8f8;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #232323;
				font-size: 28rpx;
				margin-left: 16rpx;
			}

			.switch-item-selected {
				background: #e7f8f7;
				color: #0bc5ae;
			}
		}

		.form-item-row {
			width: 100%;
			min-height: 120rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.label {
				color: #232323;
				font-size: 32rpx;
				white-space: nowrap;
			}

			.small-label {
				color: #232323;
				font-size: 32rpx;
			}

			.required-label::after {
				content: "*";
				color: #e74242;
				font-size: 30rpx;
				margin-left: 4rpx;
			}

			.selector-text {
				color: #232323;
			}

			input {
				text-align: end;
			}
		}

		.upload-id-card-view {
			width: 100%;
			display: flex;
			flex-direction: column;
			padding: 30rpx;
			box-sizing: border-box;

			.title {
				color: #232323;
				font-size: 32rpx;
			}

			.card-view {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 32rpx;
			}

			.card-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.card-img {
					width: 330rpx;
					height: 200rpx;
				}

				.tip-text {
					color: rgba(35, 35, 35, 0.8);
					font-size: 24rpx;
					margin-top: 28rpx;
				}
			}
		}
	}

	.bottom-view {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;

		.agreement-view {
			height: 80rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;
			font-size: 24rpx;
			border-bottom: solid 2rpx #f2f2f2;

			.text {
				color: rgba(35, 35, 35, 0.5);
			}

			.item {
				color: #0bc5ae;
			}
		}

		.save-btn {
			width: 100%;
			height: 88rpx;
			background: #0bc5ae;
			border-radius: 48rpx;
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 30rpx;
		}
	}

	.address-view {
		.selected {
			display: flex;
			align-items: center;
		}

		.selected-item {
			display: flex;
			align-items: center;
		}
	}
</style>